<template>
	<view>
		<scroll-view scroll-x :class="[bgColor]" class="nav text-center ">
			<view class="flex text-center justify-center">
				<view class="cu-item text-center " :class="[average?'flex-sub':'']"
				 v-for="(item,index) in datas" :key="index" @click.stop="tabSelect" :data-id="index">
					<view class="flex justify-center align-center margin-top-xs"  :class="[index==TabCur?selectColor+(cur?' cur':''):noselectColor]">
						<text v-if="item.cuIcon!=null" :class="['cuIcon-' + item.cuIcon]" class="margin-right-xs"></text>
						<image v-if="item.image!=null" :src="item.image" class="image_56 margin-right-xs"></image>
						<text :class="textstyle">{{item.name}}</text>
					</view>
					<view v-if="index==TabCur" class="margin-top-xs flex justify-center text-center">
						<view class="item-cur bg-white"></view>
					</view>
					
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				TabCur: 0,
				scrollLeft: 0
			};
		},
		name: 'cu-nav',
		computed: {
			styles() {
				var style = ""
				return style
			}
		},
		props: {
			datas: Array,
			bgColor: {
				type: String,
				default: ''
			},
			current: {
				type: [String, Number],
				default: 0
			},
			cur:{
				type: [String, Boolean],
				default: false
			},average:{
				type: [String, Boolean],
				default: true
			},
			selectColor:{
				type: String,
				default: 'text-orange-dark'
			},
			noselectColor:{
				type: String,
				default: 'text-gray-dark'
			},
			textstyle:{
				type: String,
				default: ''
			}
		},
		watch: {
			current: function(data) {
				this.TabCur = data;
			}
		},
		created() {
			this.TabCur = this.current;
		},
		methods: {
			changeCurrent(index) {
				this.TabCur = index;
			},
			onClick() {
				this.$emit('onclick', true);
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
				this.$emit('onchange', this.TabCur);
			}
		}
	}
</script>

<style scoped>
.item-cur{
	height: 6upx;
	width: 70upx;
	border-radius: 3upx;
}
</style>
